<template>
  <div>
    <div>
      <el-button @click="resetNode">重置</el-button>
      <el-button @click="getData">保存</el-button>
      <el-button @click="apiData">反显</el-button>
    </div>
    <div class="container" ref="container"></div>
  </div>
</template>

<script>
import LogicFlow from "@logicflow/core";
import {
  RectNode,
  RectNodeModel,
  DiamondNode,
  DiamondNodeModel,
  HtmlNode,
} from "@logicflow/core";
import { register } from "@logicflow/vue-node-registry";
import "@logicflow/core/lib/style/index.css";
import "@logicflow/core/dist/index.css";
import {
  DndPanel,
  SelectionSelect,
  Menu,
  Control,
  // Highlight,//高亮效果
  // ProximityConnect,//吸盘效果
} from "@logicflow/extension";

// 自定义开始节点
// 节点View
class CustomRectNode extends RectNode {}
class CustomDiamondNode extends DiamondNode {}
// 节点Model（开始节点连线规则）
class CustomRectModel extends RectNodeModel {
  initNodeData(data) {
    super.initNodeData(data);
    const circleOnlyAsTarget = {
      message: "开始节点只能连出，不能连入！",
      validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
        return targetNode.type !== "start-node";
      },
    };
    this.sourceRules.push(circleOnlyAsTarget);
  }
  setAttributes() {
    this.width = 100;
    this.height = 100;
    this.radius = 50;
  }
}
// 节点Model(普通节点连线规则)
class ordinaryCustomRectModel extends RectNodeModel {
  initNodeData(data) {
    super.initNodeData(data);
    const circleOnlyAsTarget = {
      message: "开始节点只能连出，不能连入！",
      validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
        let choose = "";
        if (targetNode.type == "start-node") {
          choose = false;
        } else {
          choose = true;
        }
        console.log("choose", choose);
        return choose;
      },
    };
    this.sourceRules.push(circleOnlyAsTarget);
  }
  setAttributes() {
    this.width = 140;
    this.height = 80;
  }
}
// 节点Model(普通棱形节点连线规则)
class ordinaryCustomDiamondNodeModel extends DiamondNodeModel {
  initNodeData(data) {
    super.initNodeData(data);
    const circleOnlyAsTarget = {
      message: "开始节点只能连出，不能连入！",
      validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
        let choose = "";
        if (targetNode.type == "start-node") {
          choose = false;
        } else {
          choose = true;
        }
        console.log("choose", choose);
        return choose;
      },
    };
    this.sourceRules.push(circleOnlyAsTarget);
  }
  setAttributes() {
    // this.width = 140;
    // this.height = 80;
  }
}
// 节点Model(结束节点连线规则)
class endCustomRectModel extends RectNodeModel {
  initNodeData(data) {
    super.initNodeData(data);
    const circleOnlyAsTarget = {
      message: "结束节点只能连入，不能连出！",

      validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
        return false;
      },
    };
    this.sourceRules.push(circleOnlyAsTarget);
  }
  setAttributes() {
    this.width = 100;
    this.height = 100;
    this.radius = 50;
  }
}
// 自定义 HTML 节点视图

LogicFlow.use(Menu);
LogicFlow.use(DndPanel);
LogicFlow.use(SelectionSelect);
LogicFlow.use(Control);
// LogicFlow.use(ProximityConnect);
// LogicFlow.use(Highlight);
import "@logicflow/core/lib/style/index.css";
import "@logicflow/extension/lib/style/index.css";
import "@logicflow/extension/es/index.css";
import ProgressNode from "./ProgressNode";
export default {
  mounted() {
    this.lf = new LogicFlow({
      plugins: [DndPanel, SelectionSelect, Control],
      container: this.$refs.container,
      stopScrollGraph: true, // 禁止鼠标滚动画布
      stopZoomGraph: true, // 禁止缩放画布
      width: 700,
      height: 600,
      grid: {
        type: "dot",
        size: 20,
      },
      // 工具配置
      textEdit: true,
      isSilentMode: false,
      edgeType: "bezier",
      snapline: true,
    });
    // 注册自定义开始节点
    this.lf.register({
      type: "start-node",
      view: CustomRectNode,
      model: CustomRectModel,
    });
    // 注册自定义普通节点
    this.lf.register({
      type: "ordinary-node",
      view: CustomRectNode,
      model: ordinaryCustomRectModel,
    });
    // 注册自定义棱形节点
    this.lf.register({
      type: "prismatic-node",
      view: CustomDiamondNode,
      model: ordinaryCustomDiamondNodeModel,
    });
    // 注册自定义结束节点
    this.lf.register({
      type: "end-node",
      view: CustomRectNode,
      model: endCustomRectModel,
    });
    register(
      {
        type: "progress",
        component: ProgressNode,
      },
      this.lf
    );
    this.lf.extension.dndPanel.setPatternItems([
      {
        type: "start-node",
        label: "开始节点",
        text: "开始",
        icon: "",
      },
      {
        type: "ordinary-node",
        label: "普通节点",
        icon: "",
      },
      {
        type: "prismatic-node",
        label: "条件判断",
        icon: "",
      },
      {
        type: "end-node",
        label: "结束节点",
        text: "结束",
        icon: "",
      },
      {
        type: "progress",
        label: "html节点",
        text: "",
        icon: "",
        properties: {
          progress: 60,
          width: 300,
          height: 80,
        },
      },

      // {
      //   type: "circle",
      //   text: "开始",
      //   label: "开始节点",
      //   icon: "",
      // },
      // {
      //   type: "rect",
      //   label: "用户任务",
      //   icon: "",
      //   className: "important-node",
      // },
      // {
      //   type: "rect",
      //   label: "系统任务",
      //   icon: "",
      //   className: "import_icon",
      // },
      // {
      //   type: "diamond",
      //   label: "条件判断",
      //   icon: "",
      // },
      // {
      //   type: "circle",
      //   text: "结束",
      //   label: "结束节点",
      //   icon: "",
      // },
    ]);
    this.lf.render();
    // 监听连线事件
    this.lf.on("connection:not-allowed", (data) => {
      console.log(data);
      this.$message(data.msg);
    });
    // 监听节点点击事件
    this.setupNodeEvents(this.lf);
  },
  methods: {
    resetNode() {
      this.data = {};
      this.lf.render(this.data);
    },
    getData() {
      let listData = this.lf.getGraphData();
      console.log(listData);
    },
    apiData() {
      this.lf.addElements({
        nodes: [
          {
            id: "node_1",
            type: "rect",
            x: 100,
            y: 100,
          },
          {
            id: "node_2",
            type: "rect",
            x: 200,
            y: 300,
          },
        ],
        edges: [
          {
            id: "edge_3",
            type: "polyline",
            sourceNodeId: "node_1",
            targetNodeId: "node_2",
          },
        ],
      });
    },
    setupNodeEvents(lf) {
      // 监听节点点击事件
      lf.on("node:click", ({ data }) => {
        console.log("Node clicked:", data);
        lf.setProperties(data.id, {
          style: {
            fill: "lightblue", // 修改节点填充颜色
          },
        });
        // alert(`Node clicked: ${data.text}`);
      });

      // 监听节点双击事件
      lf.on("node:dblclick", ({ data }) => {
        console.log("Node double-clicked:", data);
        // alert(`Node double-clicked: ${data.text}`);
      });

      // // 监听节点鼠标移入事件
      // lf.on("node:mouseenter", ({ data }) => {
      //   console.log("Mouse entered node:", data);
      // });

      // // 监听节点鼠标移出事件
      // lf.on("node:mouseleave", ({ data }) => {
      //   console.log("Mouse left node:", data);
      // });
    },
  },
};
</script>

<style scoped>
.container {
  width: 1000px;
  height: 500px;
}
</style>
